<template>
  <div>
    <el-row type="flex" class="row-bg" align="left">
      <el-col :span="4">
        <div class="titleForm">项目编号:</div>
      </el-col>
      <el-col :span="10">
        <div>{{this.SamplingPlanData.ProjectNo}}</div>
      </el-col>
    </el-row>
    <el-row type="flex" class="row-bg">
      <el-col :span="4">
        <div class="titleForm">项目名称:</div>
      </el-col>
      <el-col :span="8" :offset="1">
        <div>{{this.SamplingPlanData.ProjectName}}</div>
      </el-col>
    </el-row>
    <el-row type="flex" class="row-bg">
      <el-col :span="4">
        <div class="titleForm">委托单位:</div>
      </el-col>
      <el-col :span="8" :offset="1">
        <div>{{this.SamplingPlanData.ClientName}}</div>
      </el-col>
    </el-row>
    <el-row type="flex" class="row-bg">
      <el-col :span="4">
        <div class="titleForm" style="margin-top:5px">计划日期:</div>
      </el-col>
      <el-col :span="8" :offset="1">
        <div class="block">
          <el-date-picker
            v-model="SamplingPlanData.SamlingTimeInterval"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" class="row-bg">
      <el-col :span="4">
        <div class="titleForm">计划采样组:</div>
      </el-col>
      <el-col :span="8" :offset="1">
        <div>
          <!-- allow-create -->
          <el-select
            v-model="SamplingPlanData.samplingGroup"
            multiple
            filterable
            default-first-option
            placeholder="请选择采样组"
          >
            <!-- :content="item.data" -->
            <el-tooltip
              class="item"
              effect="dark"
              placement="right-start"
              v-for="item in optionSamplingGroup"
              :key="item.groupId"
            >
              <div slot="content">
                队长：{{item.leaderName}}
                <br>
                队员：{{item.memberName}}
              </div>
              <el-option :label="item.groupName" :value="item.groupId"></el-option>
            </el-tooltip>
          </el-select>
        </div>
      </el-col>
      <el-col :span="2">
        <el-button @click="dialogVisible=true">+</el-button>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="dialogVisible" title="增加采样组" append-to-body width="30%">
      <samplingGroup/>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <div>————————————————————————详细安排—————————————————————————</div>

    <el-row type="flex" justify="left">
      <el-button type="primary" icon="el-icon-plus" circle @click="addPlan"></el-button>
      <el-button type="danger" icon="el-icon-minus" circle @click="deletePlan"></el-button>
    </el-row>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="点位类型" width>
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.posType"
            clearable
            placeholder="点位类型"
            size="small"
            @change="SlectChange($event,scope.row.posType)"
          >
            <el-option
              v-for="item in posTypeOptions"
              :key="item.tagId"
              :label="item.tagName"
              :value="item.tagId"
              :disabled="Boolean(item.disabled)"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>

      <el-table-column label="点位选择" width>
        <template slot-scope="scope">
          <el-badge :value="Object.keys(scope.row.samplingPos).length" style="width:95%">
            <el-button size="small" class="btnDialog" @click="scope.row.dialogVisible1 = true">点位</el-button>
          </el-badge>
          <el-dialog
            title="点位选择"
            :visible.sync="scope.row.dialogVisible1"
            width="80%"
            :before-close="handleClose"
            append-to-body
          >
            <monPosForm :monPos.sync="scope.row.samplingPos"/>
            <span slot="footer" class="dialog-footer">
              <el-button @click="scope.row.dialogVisible1 = false">取 消</el-button>
              <el-button type="primary" @click="scope.row.dialogVisible1 = false">确 定</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>

      <el-table-column label="采样人员" width>
        <template slot-scope="scope">
          <el-badge :value="Object.keys(scope.row.samplingPeople).length" style="width:95%">
            <el-button size="small" class="btnDialog" @click="scope.row.dialogVisible2 = true">采样人员</el-button>
          </el-badge>

          <el-dialog
            title="人员选择"
            :visible.sync="scope.row.dialogVisible2"
            width="80%"
            :before-close="handleClose"
            append-to-body
          >
            <!-- <monPosForm :monPos.sync="scope.row.samplingPeople"/> -->
            <el-checkbox-group v-model="scope.row.samplingPeople" size="small">
              <el-checkbox
                v-for="(item,index) in allSamplingPeople"
                :key="index"
                :label="item.id"
                border
                style="margin-top:20px"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
            <span slot="footer" class="dialog-footer">
              <el-button @click="scope.row.dialogVisible2 = false">取 消</el-button>
              <el-button type="primary" @click="scope.row.dialogVisible2 = false">确 定</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>

      <el-table-column label="全程空白" width>
        <template slot-scope="scope">
          <el-badge :value="Object.keys(scope.row.vacantSampling).length" style="width:95%">
            <el-button size="small" class="btnDialog" @click="scope.row.dialogVisible3 = true">全程空白</el-button>
          </el-badge>
          <el-dialog
            title="全程空白"
            :visible.sync="scope.row.dialogVisible3"
            width="80%"
            :before-close="handleClose"
            append-to-body
          >
            <!-- <monPosForm :monPos.sync="scope.row.samplingPeople"/> -->
            <simpleMoitemForm :monitems.sync="scope.row.vacantSampling" :sourceData="null"/>
            <span slot="footer" class="dialog-footer">
              <el-button @click="scope.row.dialogVisible3 = false">取 消</el-button>
              <el-button type="primary" @click="scope.row.dialogVisible3 = false">确 定</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>
      <el-table-column label="全程平行" width>
        <template slot-scope="scope">
          <el-badge :value="Object.keys(scope.row.parallelSampling).length" style="width:95%">
            <el-button size="small" class="btnDialog" @click="scope.row.dialogVisible4 = true">全程平行</el-button>
          </el-badge>
          <el-dialog
            title="全程平行"
            :visible.sync="scope.row.dialogVisible4"
            width="80%"
            :before-close="handleClose"
            append-to-body
          >
            <!-- <monPosForm :monPos.sync="scope.row.samplingPeople"/> -->
            <simpleMoitemForm :monitems.sync="scope.row.parallelSampling" :sourceData="null"/>
            <span slot="footer" class="dialog-footer">
              <el-button @click="scope.row.dialogVisible4 = false">取 消</el-button>
              <el-button type="primary" @click="scope.row.dialogVisible4 = false">确 定</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>

      <el-table-column label="采样时间" width="240">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.samplingTime"
            type="date"
            size="small"
            placeholder="选择日期"
            style="width:80%"
          ></el-date-picker>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column> -->
    </el-table>
    <el-row type="flex" justify="end" style="margin-top:10px">
      <el-col :span="2">
        <el-button type="button">暂存</el-button>
      </el-col>
      <el-col :span="2">
        <el-button @click="MisstionAssign" type="danger">下达</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import monPosForm from '@/components/form/monPosForm.vue'
import simpleMoitemForm from '@/components/form/simpleMonItemForm.vue'
// import samplingList from '@/components/list/samplinglList.vue'
import samplingGroup from '@/components/dialog/samplingGroup.vue'
export default {
  components: { monPosForm, simpleMoitemForm, samplingGroup },
  props: {
    samplingPlanId: String
  },
  watch: {
    samplingPlanId() {
      // this.$message('112233')
      this.getBaseData()
      this.getSamplingGroup()
    }
  },
  mounted() {
    this.getBaseData()
    this.getSamplingGroup()
  },
  data() {
    return {
      optionSamplingGroup: [
        // {
        //   groupId: '0000-0000-0000-0000',
        //   groupName: '铁头娃',
        //   leaderName: '王五',
        //   memberName: '赵六，网易，腾讯，阿里'
        // },
      ],
      samplingGroup: [],
      SamplingPlanData: {
        Id: this.samplingPlanId,
        ProjectNo: '',
        ProjectName: '',
        ClientName: '',
        samplingGroup: [],
        SamlingTimeInterval: ''
      },
      allSamplingPeople: [
        {
          id: '0000-0000-0000-00001',
          name: '大和'
        },
        {
          id: '0000-1111-0000-22222',
          name: '王五'
        }
      ],
      posTypeOptions: [
        {
          tagId: '0000-1111-2222-3333',
          tagName: '地表水',
          disabled: false
        },
        {
          tagId: '111-3333-4444-5555',
          tagName: '废气',
          disabled: false
        }
      ],
      currentposTypeSelect: '',
      multipleSelection: [],
      dialogVisible: false,
      tableData: [
        {
          samplingPlanId: '',
          posType: '',
          samplingPos: [],
          samplingPeople: [],
          samplingTime: '',
          vacantSampling: [],
          parallelSampling: [],
          dialogVisible1: false,
          dialogVisible2: false,
          dialogVisible3: false,
          dialogVisible4: false
        }
      ]
    }
  },
  methods: {
    SlectChange(val, data) {
      if (val === '') {
        this.posTypeOptions.forEach(e => {
          if (e.tagId === this.currentposTypeSelect) e.disabled = false
        })
        this.currentposTypeSelect = val
        return
      }
      if (this.currentposTypeSelect != val) {
        this.posTypeOptions.forEach(e => {
          e.tagId === this.currentposTypeSelect ? (e.disabled = false) : ''
          e.tagId === val ? (e.disabled = true) : ''
        })
      }

      this.currentposTypeSelect = val
    },
    addGroup() {
      // 增加计划组
      this.dialogVisible = true
    },
    showDialog() {},
    addPlan() {
      this.tableData.push({
        posType: '',
        samplingPos: [],
        samplingPeople: [],
        samplingTime: '',
        vacantSampling: [],
        parallelSampling: [],
        dialogVisible1: false,
        dialogVisible2: false,
        dialogVisible3: false,
        dialogVisible4: false
      })
    },
    deletePlan() {
      this.multipleSelection.forEach(
        e => {
          this.tableData.splice(this.tableData.indexOf(e), 1)
          let index = -1
          this.posTypeOptions.forEach(s => {
            if (s.tagId == e.posType) {
              index = this.posTypeOptions.indexOf(s)
            }
          })
          if (index > -1) this.posTypeOptions[index].disabled = false
        }
        // this.tableData.delete(e)
      )
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    getBaseData() {
      this.axios
        .get('/Sampling/GetSimpleProjectData', {
          params: {
            samplingPlanId: this.samplingPlanId
          }
        })
        .then(e => {
          this.SamplingPlanData.ProjectNo = e.data.ProjectNo
          this.SamplingPlanData.ProjectName = e.data.ProjectName
          this.SamplingPlanData.ClientName = e.data.ClientName
          this.SamplingPlanData.SamlingTimeInterval = e.data.SamlingTimeInterval
          if (e.data.SamlingTimeInterval === null)
            this.SamplingPlanData.SamlingTimeInterval = ''
          if (e.data.samplingGroup === null)
            this.SamplingPlanData.samplingGroup = []
        })
      // .then(
      //   e => (this.ProjectNo = e.data.ProjectNo),
      //   (this.ProjectName = e.data.ProjectName),
      //   (this.clientName = e.data.ClientName)
      // )
    },
    getSamplingGroup() {
      this.axios
        .get('/Sampling/GetGroup/')
        .then(e => {
          this.optionSamplingGroup = e.data
          this.optionSamplingGroup.forEach(s => {
            s.memberName = s.memberName.join(',')
          })
        })
        .catch(e => e)
    },
    MisstionAssign() {
      //计划任务下达
      this.axios
        .put('/Sampling/AssignSamplingPlan', this.SamplingPlanData )
        .then(e => {
          this.$root.reload()
        })
        .catch(e => {})

      //关闭当前窗口
      this.$parent.$parent.dialogVisible = false
    },
    getCurrentPosType() {}, //获取当前项目的点位类型
    getCurrentPos() {}, //获取当前的项目的点位类型的所有点位
    getCurrentMonItem() {} //获取当前项目指定点位类型的点位的监测项目
  }
}
</script>

<style lang="stylus" scoped>
.el-select
  width 100%
.btnDialog
  width 100%
.titleForm
  text-align right
.el-row
  margin-bottom 20px
  &:last-child
    margin-bottom 0
.el-col
  border-radius 4px
.grid-content
  border-radius 4px
  min-height 36px
</style>
